<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true">
          <el-radio-group v-model="condition.status" @change="selectByPage(1)" >
            <el-radio-button label="全部" :value="5" />
            <el-radio-button label="未认证" :value="0" />
            <el-radio-button label="已认证" :value="1"  />
            <el-radio-button label="禁用" :value="2" />
            <el-radio-button label="注销" :value="3" />
          </el-radio-group>
          <el-form-item style="float: right;">
            <el-input v-model="condition.realname" placeholder="请输入要搜索的姓名" @input="selectByPage(1)"/>
          </el-form-item>

        </el-form>
        <el-table :data="pageInfo.list" border>
          <el-table-column prop="id" label="ID" width="50px" />
          <el-table-column prop="username" label="用户名"  width="70px"/>
          <el-table-column prop="realname" label="真实姓名" width="90px"/>
          <el-table-column prop="sex" label="性别" width="60px" />
          <el-table-column prop="idCard" label="身份证号码" width="140px" />
          <el-table-column prop="phone" label="电话" width="140px" />
          <el-table-column prop="email" label="邮箱" width="160px"/>
          <el-table-column prop="regTime" label="注册时间" />
          <el-table-column prop="money" label="余额" width="100px"/>
          <!--<el-table-column label="是否禁用" align="center" width="90px">-->
          <!--  <template #default="scope">-->
          <!--    <el-switch v-model="scope.row.status"-->
          <!--               inline-prompt-->
          <!--               :inactive-value="2"-->
          <!--               :active-value="1"-->
          <!--               style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
          <!--               inactive-text="禁用"-->
          <!--               active-text="启用"-->
          <!--               @change="updateStatus(scope.row)"-->
          <!--    />-->

          <!--  </template>-->
          <!--</el-table-column>-->
          <el-table-column label="状态" width="90px" align="center">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status == 0">未认证</el-tag>
              <el-tag type="success" v-if="scope.row.status == 1">已认证</el-tag>
              <el-tag type="danger"  v-if="scope.row.status == 2">禁用</el-tag>
              <el-tag type="info" v-if="scope.row.status == 3">注销</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small"  type="warning" @click="selectById(scope.row.id)">
                修改
              </el-button>
              <el-button size="small" plain type="warning" @click="selectByIdToPassword(scope.row.id)">
                修改密码
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                         @change="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <!-- 修改用户对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改用户信息" width="500">
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="userUpdate.username" placeholder="请输入用户名" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="userUpdate.realname" placeholder="请输入真实姓名" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-radio-group v-model="userUpdate.sex">
          <el-radio label="男" :value="男"/>
          <el-radio label="女" :value="女"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号码" label-width="20%">
        <el-input v-model="userUpdate.idCard" placeholder="请输入身份证号码" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="userUpdate.phone" placeholder="请输入电话" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="userUpdate.email" placeholder="请输入邮箱" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="注册时间" label-width="20%">
        <el-date-picker v-model="userUpdate.regTime" type="datetime" placeholder="请选择日期" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" style="width: 300px" />
      </el-form-item>
      <el-form-item label="余额" label-width="20%">
        <el-input disabled  v-model="userUpdate.money" placeholder="请输入余额" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="状态" label-width="20%">
        <el-radio-group v-model="userUpdate.status">
          <el-radio label="未认证" :value="0"/>
          <el-radio label="已认证" :value="1"/>
          <el-radio label="禁用" :value="2"/>
          <el-radio label="注销" :value="3"/>
        </el-radio-group>
      </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="update">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改用户框结束 -->

  <!-- 修改密码对话框开始 -->
  <el-dialog v-model="updateAllPasswordDialogShow" title="修改用户密码" width="500">
    <el-form-item label="登陆密码" label-width="20%">
      <el-input v-model="userAllPasswordUpdate.password" placeholder="请输入要修改的登录密码" autocomplete="off" style="width: 300px"/>
    </el-form-item>
    <el-form-item label="支付密码" label-width="20%">
      <el-input v-model="userAllPasswordUpdate.payPassword" placeholder="请输入要修改的支付密码" autocomplete="off" style="width: 300px"/>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateAllPasswordDialogShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateAllPassword">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改密码框结束 -->
</template>

<script setup>


import {ref} from "vue";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import userApi from "@/api/userApi.js";




//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)

//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
//搜索条件
const condition = ref({
  realname:null,
  status:5
})
//被修改用户信息
const userUpdate = ref({
  id:null,
  username: null,
  realname: null,
  sex: null,
  idCard: null,
  phone: null,
  email: null,
  regTime:null,
  money:null,
  status:null
})

//被修改用户密码信息
const userAllPasswordUpdate = ref({
  id:null,
  password:null,
  payPassword:null
})
//是否显示修改对话框
const updateDialogShow = ref(false);
//是否显示修改密码对话框
const updateAllPasswordDialogShow = ref(false);

//修改密码
function updateAllPassword() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  userApi.updateAllPassword(userAllPasswordUpdate.value.id,userAllPasswordUpdate.value.password,userAllPasswordUpdate.value.payPassword)
      .then(resp => {
        loading.close();
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          userAllPasswordUpdate.value={
            id:null,
            password:null,
            payPassword:null
          }
          updateAllPasswordDialogShow.value=false
          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      });
}

//修改用户信息
function update() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  userApi.update(userUpdate.value)
      .then(resp => {
        loading.close();
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          updateDialogShow.value = false;
          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      });
}
//根据id查询被修改用户的信息
function selectById(id){
  userApi.selectById(id)
      .then(resp => {
        userUpdate.value = resp.data;
        updateDialogShow.value=true;
      })
}
function selectByIdToPassword(id){
    userAllPasswordUpdate.value.id = id;
    updateAllPasswordDialogShow.value=true;
}
//分页搜索
function selectByPage(pageNum){
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  userApi.selectByPage(condition.value,pageNum,10)
      .then(resp => {
        loading.close();
        pageInfo.value = resp.data;
      });
}

selectByPage(1);
</script>

<style scoped>

</style>